<template>
  <div
    :ref="ref"
    :style="{width: width, height: height}"
  >
  </div>
</template>

<script>
import Echarts from '@/utils/echarts'
const uRef = function () {
  return new Date().getTime()
}
export default {
  name: 'LineChart',
  props: {
    width: {
      type: [String],
      default: '100%'
    },
    height: {
      type: [String],
      default: '500px'
    },
    option: {
      type: Object,
      default: function () {
        return null
      }
    }
  },
  data () {
    return {
      ref: null,
      myChart: null
    }
  },
  created () {
    this.ref = uRef()
    this.$nextTick(() => {
      this.myChart = Echarts.init(this.$refs[this.ref])
      this.myChart.clear()
      this.myChart.setOption(this.option)
    })
  },
  mounted () {
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    resize () {
      this.myChart && this.myChart.resize()
    }
  },
  watch: {
    option: {
      handler: function (val) {
        this.myChart && this.myChart.clear()
        this.myChart && this.myChart.setOption(this.option)
      },
      deep: true,
      immediate: true
    }
  }

}
</script>
